<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<title>修改地址</title>
	<meta name="keywords" content="">
	<meta name="description" content="">
	<script src="js/rem.js"></script>
	<script src="js/jquery.min.js" type="text/javascript"></script>
	<!--导入核心文件-->
	<!--	<script src="../bootstrap3/js/holder.js"></script>
        <link href="../bootstrap3/css/bootstrap.css" rel="stylesheet" type="text/css">
        <script src="../bootstrap3/jquery-1.9.1.min.js"></script>
        <script src="../bootstrap3/js/bootstrap.js"></script>-->
	<!-- 字体图标 -->
	<!--	<link rel="stylesheet" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css" />
        <link rel="stylesheet" type="text/css" href="../css/layout.css" />
        <link rel="stylesheet" type="text/css" href="../css/top.css" />
        <link rel="stylesheet" type="text/css" href="../css/footer.css" />-->
	<link rel="stylesheet" type="text/css" href="css/base.css"/>
	<link rel="stylesheet" type="text/css" href="css/page.css"/>
	<link rel="stylesheet" type="text/css" href="css/all.css"/>
	<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
	<link rel="stylesheet" type="text/css" href="css/loaders.min.css"/>
	<link rel="stylesheet" type="text/css" href="css/loading.css"/>
	<script type="text/javascript">
		$(window).load(function () {
			$(".loading").addClass("loader-chanage")
			$(".loading").fadeOut(300)
		})
	</script>
</head>
<!--loading页开始-->
<!--<div class="loading">-->
<!--	<div class="loader">-->
<!--        <div class="loader-inner pacman">-->
<!--          <div></div>-->
<!--          <div></div>-->
<!--          <div></div>-->
<!--          <div></div>-->
<!--          <div></div>-->
<!--        </div>-->
<!--	</div>-->
<!--</div>-->
<!--loading页结束-->
<body>
<header class="mui-bar mui-bar-nav report-header box-s" id="header">
	<a href="address.html"><i class="iconfont icon-fanhui fl"></i></a>
	<p>修改地址</p>
	<span class="fr baocun" id="btnSubmit">保存</span>
</header>
<div id="main" class="mui-clearfix add-address">
	<!--修改收货地址表单开始-->
	<form id="addAddressForm" class="form-horizontal" role="form">
		<input type="hidden" id="aid"/>
		<div class="plist clearfloat data">
			<ul>
				<li class="clearfloat">
					<a href="#">
						<p class="fl">收货人</p>
						<input type="text" class="fr shuru" id="name" placeholder="请输入收货人姓名"/>
					</a>
				</li>
				<li class="clearfloat">
					<a href="#">
						<p class="fl">联系电话</p>
						<input type="text" class="fr shuru" id="phone" placeholder="请输入收货人电话"></i>
					</a>
				</li>
				<li class="clearfloat">
					<a href="#">
						<p class="fl">省份</p>
						<select class="form-control" style="width:auto;" id="provinceCode"
								data-province="---- 选择省 ----"></select>
					</a>
				</li>
				<li class="clearfloat">
					<a href="#">
						<p class="fl">城市</p>
						<select class="form-control" style="width:auto;" id="cityCode"
								data-city="---- 选择市 ----"></select>
					</a>
				</li>
				<li class="clearfloat">
					<a href="#">
						<p class="fl">区县</p>
						<select class="form-control" style="width:auto;" id="areaCode"
								data-district="---- 选择区 ----"></select>
					</a>
				</li>
			</ul>
		</div>
		<textarea id="address" rows="4" cols="" placeholder="" class="textare box-s"></textarea>
		<!--				<input type="button" onclick="$('#provinceCode').val(120000);" name="oo">-->
		<div class="address-btn clearfloat">
			<span class="szwmr fl">设为默认</span>
			<a class="toggle toggle--on fr btn-default" id="isDefault"></a>
		</div>
	</form>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script src="js/fastclick.js"></script>
<script src="js/mui.min.js"></script>
<script type="text/javascript" src="js/hmt.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<!--默认按钮-->
<script type="text/javascript">
	$('.toggle').click(function (e) {

		var toggle = this;

		e.preventDefault();

		$(toggle).toggleClass('toggle--on').toggleClass('toggle--off').addClass('toggle--moving');

		setTimeout(function () {
			$(toggle).removeClass('toggle--moving');
		}, 200)

	});

	function getParam(name) {
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
		var r = location.search.substr(1).match(reg);
		if (r != null) return unescape(decodeURI(r[2]));
		return null;
	}

	var aid = getParam("aid");
	var districtPath = "../districts/";
	var defaultOption = "<option value='0'>---- 请选择 ----</option>";

	$(function () {
		var url = "../addresses/" + aid + "/getAddressInfo";
		$("#isDefault").removeClass("toggle--on");
		$("#isDefault").addClass("toggle--off");

		$.get(url, function (result) {
			if (result.state == 1000) {
				$("#name").val(result.data.name);
				$("#phone").val(result.data.phone);
				$("#address").val(result.data.address);
				if(result.data.isDefault == 1){
					$("#isDefault").removeClass("toggle--off");
					$("#isDefault").addClass("toggle--on");
				}

				addDistrictWithDefault("86", "provinceCode", result.data.provinceCode)
				addDistrictWithDefault(result.data.provinceCode, "cityCode", result.data.cityCode);
				addDistrictWithDefault(result.data.cityCode, "areaCode", result.data.areaCode);


			} else {
				window.location.href = "login.html";
			}
		});


		$("#provinceCode").change(function () {
			var code = $("#provinceCode").val();
			addDistrict(code, "cityCode");
			// 清空区级内容
			$("#areaCode").empty();
			$("#areaCode").append(defaultOption);
		});
		$("#cityCode").change(function () {
			var code = $("#cityCode").val();
			addDistrict(code, "areaCode");
		});
		// 为表单提交按钮添加点击事件
		$("#btnSubmit").click(function () {
			let address = {
				aid: aid,
				name: $("#name").val(),
				phone: $("#phone").val(),
				provinceCode: $("#provinceCode").val(),
				cityCode: $("#cityCode").val(),
				areaCode: $("#areaCode").val(),
				address: $("#address").val(),
				isDefault: $("#isDefault").hasClass("toggle--on") ? 1 : 0,
				provinceName:$("#provinceCode").find("option:selected").text(),
				cityName:$("#cityCode").find("option:selected").text(),
				areaName:$("#areaCode").find("option:selected").text(),

			}

			$.ajax({
				"url": "../addresses/" + aid + "/updateAddressInfo",
				"data": address,
				"type": "post",
				"dataType": "json",
				"success": function (json) {
					// 服务器返回状态码200时触发
					if (json.state == 1000) {
						// alert("地址修改成功！");
						history.replaceState(null, null, 'address.html')
						window.location.reload()
					} else {
						alert(json.message);
						location.replace("login.html");
					}
				},
				"error": function (json) {
					// 响应状态不是200时触发
					alert("登录状态失效，请重新登录！");
					// 页面重定向到login.html
					location.href = "login.html";
				}
			});
		});
	});

	function addDistrict(parentCode, selectId) {
		// 清空之前填充的内容
		$("#" + selectId).empty();
		if (parentCode == "0") {
			$("#" + selectId).append(defaultOption);
			return;
		}

		// 发送AJAX请求新的内容
		$.get(districtPath, {parent: parentCode}, function (result) {
			if (result.state == 1000) { // 成功
				$("#" + selectId).append(defaultOption);
				for (var index in result.data) {
					var item = result.data[index];
					var option = "<option value='" + item.code + "'>" + item.name + "</option>";
					$("#" + selectId).append(option);
				}
			} else {
				alert(result.msg);
			}
		})
	}

	function addDistrictWithDefault(parentCode, selectId, defaultId) {
		// 清空之前填充的内容
		$("#" + selectId).empty();
		if (parentCode == "0") {
			$("#" + selectId).append(defaultOption);
			return;
		}

		// 发送AJAX请求新的内容
		$.get(districtPath, {parent: parentCode}, function (result) {
			if (result.state == 1000) { // 成功
				$("#" + selectId).append(defaultOption);
				for (var index in result.data) {
					var item = result.data[index];
					var option = "<option value='" + item.code + "'>" + item.name + "</option>";
					$("#" + selectId).append(option);
				}
				$("#" + selectId).val(defaultId)
			} else {
				alert(result.msg);
			}
		})
	}
</script>
</html>
